<template>
	<view class="wrap">
		<view class="defaultMap" v-if="!carList.length === 0">
			<image src="/static/img/images/tu.png" mode=""></image>
			<view class="texna"> 暂无更多信息，看看其他的吧 </view>
		</view>
		<view class="content" v-for="(item, index) in carList" :key="item.FindId">
			<view class="main" @click="findcardetails(item, '1')">
				<view class="img-content">
					<view class="img">
						<!-- <image :src="item.findImg" mode=""></image> -->
						<u-lazy-load :image="item.goodimg + '!idx'"></u-lazy-load>
					</view>
				</view>
				<view class="text-content">
					<view class="text-title">
						<text class="icon-xun">寻</text>
						<text class="title">
							{{ item.car_name }}{{ item.car_Type_Name }}
						</text>
					</view>
					<view class="car-detail">
						<view class="left flex">
							<view> 类型： </view>
							<view>
								{{ item.specification }}
							</view>
						</view>
					</view>
					<view class="car-detail">
						<view class="flex left flex-ai-c">
							<view style="width: 140rpx;"> 外观/内饰:</view>
							<view v-for="(item1, index) in item.facade_Picture.slice(0, 1)" :key="index">
								<!-- {{item.facade_Picture}} -->
								<view class="flex flex-ai-c" v-show="item1.inColour.colorCoding.split('/').length === 1">
									<view class="yuan" :style="{ background: item1.inColour.colorCoding }"></view>
									<view class="flex flex-ai-c" style="margin: 0 10rpx;">
										<view>{{ item1.inColour.color }}</view>/
										<view>{{ item1.outerColour.color }}</view>
									</view>

									<view class="yuan" :style="{ background: item1.outerColour.colorCoding }"></view>
								</view>
								<view class="flex flex-ai-c" v-if="item1.inColour.colorCoding.split('/').length === 0">
								</view>
								<view v-show="item1.inColour.colorCoding.split('/').length >= 2" class="flex flex-ai-c">
									<view class="yuan" :style="{
                      background: item1.inColour.colorCoding.split('/')[0],
                    }"></view>
									<view class="yuan" :style="{
                      background: item1.inColour.colorCoding.split('/')[1],
                    }"></view>
									<view style="width: 140rpx;">外观/内饰</view>
									<view class="yuan" :style="{ background: item1.outerColour.colorCoding }"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="car-detail">
						<view class="left flex">
							<view class="left" style="width: 140rpx;"> 上牌地： </view>
							<view>
								{{ item.goods_Region_Name }}
							</view>
						</view>
					</view>
					<view class="car-detail">
						<view class="left flex">
							<view class="left" style="width: 140rpx;"> 发布日期： </view>
							<view>
								<text>{{ returnTime(item.addTime) }}</text>
							</view>
						</view>
					</view>
					<view class="car-detail">
						<view class="left flex">
							<view style="width: 140rpx;"> 有效期至： </view>
							<view>
								<text>{{ item.deadline.split('T')[0] }}</text>
							</view>
						</view>
					</view>
					<view class="car-text">
						{{ item.remark }}
					</view>
				</view>
			</view>
			<view class="bottom-text">
				<view class="left">
					<view class="browse">
						<text>{{ item.views }}</text> 次浏览/已有
						<text>{{ item.offerAmount }}</text> 家车商报价
					</view>
					<view class="time">
						剩余报价时间：<view>
							<u-count-down separator-size="26" font-size="26" :timestamp="item.countdown" separator="zh"></u-count-down>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="findcardetails(item, '2')"> 我要报价 </view>
					<view> 报价后可联系买方 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			carList: {
				type: Array,
				default: function() {
					return []
				},
			},
			carDetail: {
				type: Array,
				default: function() {
					return []
				},
			},
		},
		data() {
			return {}
		},
		methods: {
			returnTime(time) {
				if (time) {
					return time.split('T')[0] + ' ' + time.split('T')[1]
				}
			},
			//寻车详情
			findcardetails(val, type) {
				console.log(val)
				uni.navigateTo({
					url: '/pages_findCar/noQuotationForFindCar/noQuotationForFindCar?id=' +
						val.id +
						'&storeId=' +
						val.store_Id +
						'&type=' +
						type,
				})
			},
		},
	}
</script>

<style lang="scss">
	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 100%;
		height: 85vh;
		text-align: center;

		image {
			width: 340rpx;
			height: 340rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}

	@mixin icon-xun() {
		width: 36rpx;
		height: 36rpx;
		background: #fbb000;
		color: #fff;
		border-radius: 4rpx;
		padding: 0rpx 4rpx;
		font-size: 32rpx;
	}

	$colorEB5C02: #eb5c02;

	.wrap {
		// width: 100%;
		background-color: #f6f6f6;
		margin-bottom: 30rpx;

		.content {
			margin: 20rpx 0rpx;
			background: #fff;
			border-radius: 10rpx;

			.main {
				width: 100%;
				border-bottom: 2rpx solid #eeeeee;
				display: flex;

				.img-content {
					padding: 2%;

					.img {
						width: 200rpx;
						height: 133rpx;
						border-radius: 5px;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.text-content {
					width: 65%;
					flex: 1;
					padding: 2%;

					.icon-xun {
						@include icon-xun;
					}

					.title {
						color: #333333;
						font-size: 28rpx;
						line-height: 46rpx;
						margin-left: 4rpx;
					}

					.car-detail {
						padding: 6rpx 0px;
						font-size: 26rpx;

						.left {
							color: #999999;
						}

						.yuan {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
							border: 2rpx solid #EEEEEE;
						}

						.right {
							flex-grow: auto;
							color: #333333;
						}
					}

					.car-text {
						color: #eb5c02;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.bottom-text {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				padding: 2% 3%;
				color: #999;

				.left {
					width: 60%;
					line-height: 50rpx;

					.browse {
						text {
							font-weight: bold;
							color: $colorEB5C02;
						}
					}

					.time {
						text {
							color: #333;
						}
					}
				}

				.right {
					flex: 1;
					width: 40%;
					line-height: 40rpx;
					text-align: right;

					.btn {
						width: 171rpx;
						height: 56rpx;
						line-height: 56rpx;
						font-size: 30rpx;
						color: #333;
						background: #ffe03a;
						text-align: center;
						border-radius: 40rpx;
						display: inline-block;
					}
				}
			}
		}
	}
</style>
